<template>
    <div class="banner">
        <ul class="clearfix">
            <li>
                <img src="/src/assets/img/home/banner/599aaf6953c93.jpg" alt="" />
            </li>
            <li>
                <img src="/src/assets/img/home/banner/5984568a46e8d.jpg" alt="" />
            </li>
            <li>
                <img src="/src/assets/img/home/banner/huokeBanner.png" alt="" />
            </li>
        </ul>
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <!-- <li></li> -->
        </ol>
        
    </div>
</template>
<script>
export default {
    mounted() {
        this.fnSlider();
    },
    watch: {
        
    },
    methods: {
        fnSlider() {
            $(function() {
                var mySwipe = new Swipe($('.banner')[0], {
                    auto: 2000,
                    continuous: true,
                    stopPropation: true,
                    callback: function(index, element) {
                        $('.banner ol li').removeClass('active');
                        $('.banner ol li').eq(index).addClass('active');
                    }
                });
            });
        }
    }
}
</script>
<style scoped>
.banner {
    position: relative;
    overflow: hidden;
    height: 7rem;
    z-index: 1;
}

.banner ul li {
    height: 7rem;
    width: 6.4rem;
    float: left;
    position: relative;
}

.banner ul li img {
    height: 7rem;
    width: 100%;
    display: block;
}

.banner ol {
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
}

.banner ol li {
    width: 0.15rem;
    height: 0.15rem;
    background: #5477b2;
    float: left;
    border-radius: 50%;
    margin-right: 0.08rem;
}

.banner ol li.active {
    background: #fff;
}

</style>
